import React, { useState } from 'react'

import stylesRankList from './rankList.less'

import { Breadcrumb, Table } from 'antd';
import { useEffect } from 'react';
import { getClassInfo,getStudentInterViewRList } from '@/services';
import { IInterViewListQuery, IInterViewLogkList, IInterViewRankQuery, IRankList } from '@/utils';

const columns = [
    {
        title: '排行',
        dataIndex: 'rangking',
        align: "center"
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
        align: "center"
    },
    {
        title: '面试记录提交数',
        dataIndex: 'count',
        align: "center",
    },
    {
        title: '班级',
        dataIndex: 'className',
        align: "center"
    },
    {
        title: '专业',
        dataIndex: 'majorName',
        align: "center"
    }]

const rankList: React.FC = () => {
    let [rankList, setRankList] = useState<IRankList[]>([])
    let [subs, setSubs] = useState('')
    let [classId, setClassId] = useState<IInterViewRankQuery>()
    let [list, setList] = useState<IInterViewListQuery>({ pageNum: 1, pageSize: 10, classId } as IInterViewListQuery)
    let [logList, setlogList] = useState<IInterViewLogkList[]>()
    let [cut, setCut] = useState(false)

    useEffect(() => {
        getClassInfo().then(ok => {
            if (ok.code === 200) {
                setRankList(ok.data)
                console.log(ok)
            }
        })
    }, [])

    useEffect(() => {


        if (cut) {
            const path="/sypt/interview/interviewAnswerRangking"
            getStudentInterViewRList(path).then(ok => {
                if (ok.code === 200) {
                    setlogList(ok.rows)
                }
            })
        } else {
            const path="/sypt/interview/interviewRecordRangking"
            getStudentInterViewRList(path).then(ok => {
                if (ok.code === 200) {
                    setlogList(ok.rows)
                }
            })
        }
    }, [cut, classId])

    return <div className={stylesRankList.postSkill}>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>面试</Breadcrumb.Item>
            <Breadcrumb.Item>面试排行榜</Breadcrumb.Item>
        </Breadcrumb>
        <div className={stylesRankList.rankList}>
            <div className={stylesRankList.btn}>
                <b className={cut == false ? stylesRankList.sc : ''} onClick={() => { setCut(false) }}>面试记录榜单</b>
                <b className={cut == true ? stylesRankList.sc : ''} onClick={() => { setCut(true) }}>面试题榜单</b>
            </div>
            <Table style={{ width: "95%", margin: "0 auto", textAlign: "center" }} rowKey="rangking" dataSource={logList as IInterViewLogkList[]} columns={columns as any} />
        </div>
    </div>
}
export default rankList